<!-- app.vue -->
<template>
    <div id="aaapp">
        <vue-tabbar-slide :options="options" @callback="callback"></vue-tabbar-slide>
        <div class="my-item-wrap">
            <div class="mit-items" v-for="item in list">
                <div class="im-img">
                    <img :src="item.image_text" >
                </div>
                <div class="itm-mid">
                    <div class="itm-mid-title one-ellipsis" v-text="item.name"></div>
                    <div class="item-dec one-ellipsis" v-text="item.desc_text"></div>
                </div>
                <img src="/images/duihao.png"  class="itm-right" v-if="item.is_my">
                <img src="/images/jia.png"  class="itm-jia" v-else @click="add(item)" >
            </div>
        </div>
    </div>
</template>

<script>
    //main.js
    import vueTabbarSlide from 'vue-tabbar-slide'
    Vue.use(vueTabbarSlide);
    import {pageConfig} from '@/config';
    export default {
        name: 'app',
        data () {
            return {
                options: {
                    //required(必填项)
                    container: 'mySlide1',
                    slideData: [],
                    //用来传递data-id
                    slideId: [],
                    //optional(可选项)
                    width: '64px',
                    index: 0,
                    color: '#999999',
                    checkedColor: '#333333',
                    downLineColor: '#333333'
                },
                cate_id: 0,
                list: [],
                cates: []
            }
        },
        created: function () {
            if (!this.$user.is_login()) {
                this.$user.jumpLogin();
            } else {
                this.getData();
            }
        },
        methods: {
            getData () {
                this.$http.$ajax('getCate', pageConfig.public, {
                }, {loading: false, success:(res)=> {
                    let cates = res.data;
                    this.cates = cates;
                    let slideData = [];
                    let slideId = [];
                    let cate_id;
                    let that = this;
                    cates.forEach(function(v, i){
                        slideData.push(v.name);
                        slideId.push(v.id);
                        if (i === 0) {
                            that.cate_id = v.id;
                        }
                    });

                    this.options.slideData = slideData;
                    this.options.slideId = slideId;
                    this.getItems();
                }});
            },

            callback (event, index, val, id) {
                this.cate_id = id;
                this.list = [];
                this.getItems();
            },
            getItems() {
                this.$http.$ajax('getItems', pageConfig.public, {
                    cate_id: this.cate_id
                }, {loading: '加载中...', success:(res)=> {
                    this.list = res.data;
                }});
            },
            add(v) {
                let is_my = v.is_my;
                let id = v.id;
                this.$http.$ajax('addItem', pageConfig.public, {
                    item_id: id,
                    is_my: is_my   //当前
                }, {loading: '处理中...', success:(res)=> {
                    v.is_my =  v.is_my === 1 ? 0 : 1;
                    this.$toast('修改成功');
                }});
            }

        }
    }
</script>
<style>
    .im-img {
        width: 53px;
        height: 53px;
        border-radius: 50%;
    }
    .im-img img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .my-item-wrap {
        display: flex;
        justify-content: space-between;
        padding: 26px;
        flex-wrap: wrap;
    }
    .mit-items {
        width: 330px;
        height: 118px;
        background-color: #F6F6F6;
        display: flex;
        padding: 18px;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        margin-bottom: 18px;
        border-radius: 20px;
    }
    .itm-mid {
        width: 166px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .itm-mid-title {
        font-size:24px;
        font-weight:bold;
        color:#333333;
        line-height:60px;
    }
    .item-dec {
        font-size:20px;
        font-weight:bold;
        color:#787878;
        line-height:36px;
        width: 100%;
    }
    .itm-jia {
        width: 20px;
        height: 20px;
    }
    .itm-right {
        width: 30px;
        height: 38px;
    }

</style>